<template>
  <el-dropdown @command="handleCommand">
    <el-button plain>
      {{ currentLan }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="lang in langs" :command="lang">{{
          lang.title
        }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup>
import { ref } from "vue";

import { langs } from "@/locales";
import { useLocaleStore } from "@/store/modules/locales";

const useLocale = useLocaleStore();

let curLocale = useLocale.locale;
let currentLan = ref(langs.find((item) => item.key === curLocale).title);

function handleCommand(command) {
  currentLan.value = command.title;
  useLocale.setLocale(command.key);
}
</script>
